<template>
  <div class="top-line">
    <el-avatar class="avatar" :src="'http://sbd3gglpo.hn-bkt.clouddn.com/%E4%B8%BB%E9%A1%B5/bookidz.png'" alt="Avatar"></el-avatar>
<!--    TODO 顶部菜单 el-menu-->
    <div class="center-button-box">
      <button @click="toHome">首页</button>
      <button @click="toCategory">分类</button>
      <button @click="toRankList">排行榜</button>
      <button @click="toCart">购物车</button>
      <button @click="toOrder">订单</button>
      <button @click="toForum">论坛</button>
    </div>
    <div v-if="isLogin" class="right-info-box">
      <el-popover
          placement="bottom"
          :width="300"
          popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
          trigger="hover"
          content="this is content, this is content, this is content"
      >
        <template #reference>
          <button>个人信息</button>
        </template>
        <div style="display: flex; gap: 16px; flex-direction: column">
<!--          TODO 描述列表 el-Description-->
          <!--                      <el-avatar :src="userInfo.avatar" alt="Avatar">-->
          <div>
            <el-tag type="primary">ID</el-tag>
            {{ userInfo.userId }}
          </div>
          <div>
            <el-tag type="primary">昵称</el-tag>
            {{ userInfo.userNick }}
          </div>
          <div>
            <el-tag type="primary">电话</el-tag>
            {{ userInfo.mobilePhone }}
          </div>
          <el-button type="danger" @click="logout">退出登录</el-button>
        </div>
      </el-popover>
    </div>
    <button v-else @click="toLoginPage">登录/注册</button>

  </div>
  <HomePage v-if="path==='/home'" @init-user-info="initUserInfo"></HomePage>
  <CategoryPage v-else-if="path==='/category'"></CategoryPage>
  <RankListPage v-else-if="path==='/rankList'"></RankListPage>
  <CartPage v-else-if="path==='/cart'"></CartPage>
  <OrderPage v-else-if="path==='/order'"></OrderPage>
  <ForumPage v-else-if="path==='/forum'"></ForumPage>
</template>

<script>
import HomePage from "@/components/HomePage";
import CategoryPage from "@/components/CategoryPage";
import RankListPage from "@/components/RankListPage";
import CartPage from "@/components/CartPage";
import OrderPage from "@/components/OrderPage";
import ForumPage from "@/components/ForumPage";
export default {
  name: "TopLine",
  components: {RankListPage, CategoryPage, HomePage, CartPage, OrderPage, ForumPage},
  mounted() {
    this.initUserInfo();
  },
  data() {
    return {
      searchQuery: '',
      isLogin: false,
      userInfo: {},
      path: '/home'
    }
  },
  methods: {
    toLoginPage() {
      this.$router.push('/login')
    },
    logout() {
      localStorage.removeItem('userInfo');
      this.isLogin = false;
    },
    initUserInfo() {
      const userInfo = JSON.parse(localStorage.getItem('userInfo'));
      if (userInfo) {
        this.isLogin = true;
        this.userInfo = userInfo.data;
      }
    },
    toHome() {
      this.path = '/home';
    },
    toCategory() {
      this.path = '/category';
    },
    toRankList() {
      this.path = '/rankList';
    },
    toCart() {
      this.path = '/cart';
    },
    toOrder() {
      this.path = '/order';
    },
    toForum() {
      this.path = '/forum';
    }
  }
}
</script>

<style scoped>
.top-line {
  background-color: aquamarine;
  height: 150px;
  display: flex;
}

.top-line .avatar {
  align-self: center;
  margin: 30px 0 30px 200px;
  height: 100px;
  width: 100px;
}

.top-line button{
  cursor: pointer;
  width: 200px;
  height: 100%;
  border: 2px solid orange; /* 边缘线颜色 */
  background-color: orange;
  color: white;
  font-size: 20px;
}
.top-line button:hover{
  background-color: #ff8c00; /* 鼠标悬停时的背景颜色 */
}

.center-button-box {
  margin: 0 0 0 80px;
}




</style>